<template>
    <div class="big">
        <div class="box">
            <center><h1>修改个人信息</h1></center>
            <!-- <span>手机号码：</span><el-input v-model="admin.adminTel" placeholder="请输入内容" width = 100></el-input> -->
            <el-form :model="form">
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="admin.adminTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="admin.adminName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-radio v-model="admin.adminSex" label="0">女</el-radio>
                <el-radio v-model="admin.adminSex" label="1">男</el-radio>
            </el-form-item>
            <el-form-item label="状态" :label-width="formLabelWidth">
                <el-radio v-model="admin.adminStatus" label="0">可用</el-radio>
                <el-radio v-model="admin.adminStatus" label="1">停用</el-radio>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth">
                <el-select v-model="admin.deptId" placeholder="请选择部门">
                <el-option
                    v-for="(dept, index) in deptList"
                    :key="index"
                    :label="dept.deptName"
                    :value="dept.deptId"
                ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="头像" :label-width="formLabelWidth">
                <el-upload action="http://localhost:8080/admin/upload" list-type="picture-card" :on-success="uploadSuccess" :auto-upload="true" :multiple="false" :limit="1">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                    <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                    />
                    <span class="el-upload-list__item-actions">
                    <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                    >
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                    >
                        <i class="el-icon-download"></i>
                    </span>
                    <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                    >
                        <i class="el-icon-delete"></i>
                    </span>
                    </span>
                </div>
                <!-- <div class="photo">
                    <img :src="admin.adminImg" alt="" width="150" height="150">
                </div> -->
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
            </el-form-item>
            <el-button type="primary" @click="updateAdmin()">提 交</el-button>
            </el-form>
        </div>
    </div>
</template>


<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      admin: {
        adminId: "",
        adminImg:"",
      },
      deptList: [],
    };
  },
  methods: {
    updateAdmin(){
        this.$axios.put("/admin",this.admin).then(res => {
            if(res.data.code == 200){
                this.$message.success("修改成功");
            }
        })
    },
    loadDepts() {
      this.$axios.post("/dept").then((res) => {
        this.deptList = res.data.data.deptList;
      });
    },
    selOne(id) {
      this.$axios.get("/admin/" + id).then((res) => {
        this.admin = res.data.data.tadmin;
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    uploadSuccess(res,file){
        this.admin.adminImg = res.message;
    }
  },
  mounted() {
    this.admin.adminId = sessionStorage.getItem("adminId");
    this.selOne(this.admin.adminId);
    this.loadDepts();
  },
};
</script>
<style scoped>
.box {
  width: 400px;
  height: auto;
  /* background-color: skyblue; */
  margin: 0 auto;
}
.photo {
    float: left;
    margin-left: 150px;
    margin-top: -150px;
}
</style>>